<template>
  <div style="height: 100px;">
    <div class="component-header">
      <div class="header-content">

        <div class="h-left" @click="ToHomePage">
          <el-image src="https://www.ketangpai.com/images/common/logo_blue.png" alt="logo" class="img" />
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                   active-text-color="#4285f4">
            <el-menu-item index="1" @click="change1"
                          style="font-weight: 800;font-size: large;">我的课程</el-menu-item>
          </el-menu>
        </div>


        <div class="main-header-right">
          <div v-for ="(item,index) in menu" :key="index" class="header-menu" @click="toHeaderPage(item.path)">
            <span>{{item.name}}</span>
          </div>
          <RightHeader style="margin-top: 15px"/>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import RightHeader from '../RightHeader.vue'
import { Message } from 'element-ui'
export default {
  name: 'teacherMainPage',
  data() {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      activeIndex: '1',
      menu: [
        {
          name: 'ai工具集',
          path: '/taskManagement'
        },
        {
          name:'论文查重',
          path: '/taskManagement'
        },
        {
          name:'任务管理',
          path: '/taskManagement'
        }
      ],
    }
  },

  methods: {
    toHeaderPage(path) {
      this.$router.push(path)
    },
    ToHomePage() {
      this.$router.push('/')
    },
    change1() {
      Message({message: '已经在此页了！'})
      // this.$router.push("/main")
    },
  },
  components: {
    RightHeader
  }
}
</script>
<style scoped>
.component-header {
  height: 64px;
  width: 1660px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

.header-content {
  position: relative;
  background-color: #fff;
  top: 0;
  left: 0;
  height: 80px;
  padding: 0 28px;
  display: flex;
  flex-flow: row nowrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 10px #ccc;
}

.h-left {
  cursor: pointer;
  flex: 4;
  display: flex;
  .logo-img {
    cursor: pointer;
    margin: 0 auto;

    .img {
      width: 120px;
      height: 50px;
    }
  }
}
.main-header-right{
  display: flex;
}
.main-header-right .header-menu{
  margin-right: 20px;
  font-size: 16px;
  color: #333;
  margin-top: 20px;
  margin-left: 20px;
  width: 100px;
  cursor: pointer;
}


.el-menu-demo {
  flex: 5;
}
.main-header .img{
  width: 135px;
  height: 38px;
  margin: 10px 40px 5px 20px;
}
</style>